<template>
  <!-- 歌手模块 -->
  <div class="mod-art">
    <div class="container">
      <div class="art-nav">
        <ul class="art-nav-list clearfix">
          <li
            @click="searchArtist('&initial=' + item.id, 0, index)"
            :class="[
              'art-nav-item',
              { 'art-nav-item-current': currentIndex[0] == index },
            ]"
            v-for="(item, index) in initial"
            :key="index"
          >
            <a href="javascript:;">{{ item.key }}</a>
          </li>
        </ul>
        <ul class="art-nav-list clearfix">
          <li
            @click="searchArtist('&type=' + item.id, 1, index)"
            :class="[
              'art-nav-item',
              { 'art-nav-item-current': currentIndex[1] == index },
            ]"
            v-for="(item, index) in type"
            :key="index"
          >
            <a href="javascript:;">{{ item.key }}</a>
          </li>
        </ul>
        <ul class="art-nav-list clearfix">
          <li
            @click="searchArtist('&area=' + item.id, 2, index)"
            :class="[
              'art-nav-item',
              { 'art-nav-item-current': currentIndex[2] == index },
            ]"
            v-for="(item, index) in area"
            :key="index"
          >
            <a href="javascript:;">{{ item.key }}</a>
          </li>
        </ul>
      </div>
      <div ref="artistMain" class="art-main">
        <ul class="art-main-list clearfix">
          <li
            class="art-main-item"
            v-for="(item, index) in artists"
            :key="item.id"
          >
            <div class="artist-item-box">
              <div class="artist-item-cover" v-if="index < 10">
                <a
                  href="javascript:;"
                  :title="item.name"
                  @click="clickArtistDetail(item.id)"
                >
                  <img
                    :src="item.img1v1Url"
                    :alt="item.name"
                    class="artist-item-pic"
                  />
                </a>
              </div>
              <h4 class="artist-name">
                <a
                  href="javascript:;"
                  :title="item.name"
                  class="artist-name-txt"
                  @click="clickArtistDetail(item.id)"
                >
                  {{ item.name }}</a
                >
              </h4>
            </div>
          </li>
        </ul>
      </div>
      <div class="artist-el-pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="listsTotal"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      initial: [
        {
          key: "全部",
          id: "-1",
        },
        {
          key: "A",
          id: "a",
        },
        {
          key: "B",
          id: "b",
        },
        {
          key: "C",
          id: "c",
        },
        {
          key: "D",
          id: "d",
        },
        {
          key: "E",
          id: "e",
        },
        {
          key: "F",
          id: "f",
        },
        {
          key: "G",
          id: "g",
        },
        {
          key: "H",
          id: "h",
        },
        {
          key: "I",
          id: "i",
        },
        {
          key: "J",
          id: "j",
        },
        {
          key: "K",
          id: "k",
        },
        {
          key: "L",
          id: "l",
        },
        {
          key: "M",
          id: "m",
        },
        {
          key: "N",
          id: "n",
        },
        {
          key: "O",
          id: "o",
        },
        {
          key: "P",
          id: "p",
        },
        {
          key: "Q",
          id: "q",
        },
        {
          key: "R",
          id: "r",
        },
        {
          key: "S",
          id: "s",
        },
        {
          key: "T",
          id: "t",
        },
        {
          key: "U",
          id: "u",
        },
        {
          key: "V",
          id: "v",
        },
        {
          key: "W",
          id: "w",
        },
        {
          key: "X",
          id: "x",
        },
        {
          key: "Y",
          id: "y",
        },
        {
          key: "Z",
          id: "z",
        },
        {
          key: "#",
          id: "0",
        },
      ],
      type: [
        {
          key: "全部",
          id: "-1",
        },
        {
          key: "男歌手",
          id: "1",
        },
        {
          key: "女歌手",
          id: "2",
        },
        {
          key: "乐队",
          id: "3",
        },
      ],
      area: [
        {
          key: "全部",
          id: "-1",
        },
        {
          key: "华语",
          id: "7",
        },
        {
          key: "欧美",
          id: "96",
        },
        {
          key: "日本",
          id: "8",
        },
        {
          key: "韩国",
          id: "16",
        },
        {
          key: "其他",
          id: "0",
        },
      ],
      artists: [],
      currentPage: 1,
      pageSize: 60,
      listsTotal: 60,
      params: ["", "", ""],
      param: "",
      // 后面是否还有数据
      pm: 1,
      currentIndex: [0, 0, 0],
    };
  },
  mounted() {
    this.getArtist("");
  },
  methods: {
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    searchArtist(str, key, index) {
      this.param = "";
      for (let i = 0; i < 3; i++) {
        if (i == key) {
          this.params[i] = str;
          // console.log(this.params);
        }
        this.param += this.params[i];
      }
      console.log(this.param);
      this.currentPage = 1;
      this.listsTotal = 60;
      this.pm = 1;
      this.currentIndex[key] = index;
      this.getArtist(this.param);
    },
    handleCurrentChange() {
      // console.log(this.currentPage);
      // console.log(`当前页: ${val}`);
      console.log(this.currentPage);
      this.getArtist(this.param);
      // 点击分页后，滚动到评论的头部，141为页面头部组件的高度
      document.documentElement.scrollTo({
        top: this.$refs.artistMain.offsetTop + 141,
        behavior: "smooth",
      });
    },
    getArtist(param) {
      this.axios({
        /* 排行榜接口地址 */
        url:
          "/artist/list?limit=60&offset=" + (this.currentPage - 1) * 60 + param,
      })
        .then((res) => {
          this.artists = res.data.artists;
          if (res.data.more) {
            if (this.currentPage == this.pm) {
              this.pm++;
              this.listsTotal += 60;
            }
          } else {
            this.pm = this.listsTotal / 60 + 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-art {
  position: relative;
  padding-top: 50px;
  background-color: var(--color-theme-light-5);
}
.art-nav {
  margin-bottom: 50px;
  padding: 30px 0 14px 20px;
  font-size: 14px;
  color: #000;
  background-color: var(--color-theme-light-4);
}
.art-nav-item {
  float: left;
  margin: 0 10px 16px 0;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
}
.art-nav-item:hover a {
  color: var(--color-theme);
}
.art-nav-item:nth-child(1) {
  margin-right: 28px;
}
.art-nav-item-current {
  background-color: var(--color-theme);
}
.art-nav-item-current a {
  color: #fff !important;
}

/* art-main */
.art-main-list {
  margin-right: -20px;
  margin-bottom: 50px;
}
.art-main-item {
  float: left;
  width: 20%;
}
.artist-item-box {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin-right: 20px;
  margin-bottom: 20px;
}
.artist-item-cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 100%;
  margin-bottom: 10px;
}
.artist-item-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.artist-name {
  overflow: hidden;
}
.artist-name a:hover {
  color: var(--color-theme);
}
.artist-name-txt {
  font-size: 14px;
  float: left;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
}
.artist-el-pagination {
  position: relative;
  text-align: center;
  margin: 20px auto;
}
</style>